<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      @layer reset, layout, modules;

      @layer base {
        img {
          display: block;
          max-width: 100%;
        }
      }

      @layer layout {
        .l-page {
          margin-inline: 1rem;
        }

        .l-page > * {
          container: layout / inline-size;
        }

        @media (min-width: 800px) {
          .l-page {
            display: grid;
            gap: 1rem;
            grid-template-columns: 1fr 30%;
          }
        }
      }

      @layer modules {
        .media {
          padding: 1.5rem;
          background-color: #eee;
          border-radius: 5px;
        }

        .media__image {
          margin-inline: auto;
        }

        .media__body {
          container: layout / inline-size;
          flex-grow: 1;
        }

        @container layout (width >= 450px) {
          .media {
            display: flex;
            gap: 1.5em;
          }

          .media__image {
            align-self: start;
            margin-inline: revert;
          }
        }

        .race-grid {
          display: grid;
          grid-template-columns: 2fr 3fr;
          grid-auto-rows: 1fr;
          gap: 1rem;
        }

        .race-grid > :nth-child(3n - 1) {
          grid-row: span 2;
        }

        .race-detail {
          container: layout / inline-size;
          border: 1px solid #ccc;
        }

        .race-detail > img {
          inline-size: 100%;
          max-block-size: 30cqi;
          object-fit: cover;
        }

        .race-detail__body {
          padding: 1rem 1.5rem;
        }

        .race-detail__body > h3 {
          font-size: clamp(1rem, 3.5cqi, 1.8rem);
          font-family: Helvetica, sans-serif;
        }
      }
    </style>
  </head>
  <body class="l-page">
    <main>
      <h1>Franklin Running Club</h1>
      <div class="race-grid">
        <div class="race-detail">
          <img src="race.jpg" />
          <div class="race-detail__body">
            <h3>Union County 10K</h3>
            <p class="rate-detail__date">Saturday, April 14</p>
          </div>
        </div>
        <div class="race-detail">
          <img src="shoe.jpg" />
          <div class="race-detail__body">
            <h3>St. Patrick's Day 5K</h3>
            <p class="rate-detail__date">Saturday, March 17</p>
          </div>
        </div>
        <div class="race-detail">
          <img src="runner-hill.jpg" />
          <div class="race-detail__body">
            <h3>2 mile uphill</h3>
            <p class="rate-detail__date">Thursday, March 29</p>
          </div>
        </div>
      </div>
    </main>
    <aside>
      <h3>Running tips</h3>
      <div class="media">
        <img class="media__image" src="runner.png" />
        <div class="media__body">
          <h4>Change it up</h4>
          <p>
            Don't run the same every time you hit the road. Vary your pace, and
            vary the distance of your runs.
          </p>
        </div>
      </div>
    </aside>
  </body>
</html>
